<template>
  <div class="xiandu_detail">
    <header>
      <Icon type="ios-arrow-back" size="34" @click="back()" />
      <p v-if="main_data_flag">{{main_data.results[index].site.name}}</p>
    </header>
    <main>
      <div v-if="main_data_flag">
        <h1>{{main_data.results[index].title}}</h1>
        <!-- <img :src="main_data.results[index].cover" alt /> -->
        <div class="time">
          <Time :time="main_data.results[index].created_at" />
        </div>
      </div>
      <div
        class="content"
        v-if="main_data_flag&&main_data.results[index].content"
        v-html="main_data.results[index].content"
      ></div>
      <div class="content" ref="content" v-if="main_data_flag&&!main_data.results[index].content"></div>
    </main>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      id: this.$route.query.id,
      size: this.$route.query.size,
      num: this.$route.query.num,
      index: this.$route.query.index
    };
  },
  computed: {
    ...mapState("xiandu_children", ["main_data", "main_data_flag"])
  },
  created() {
    this.$store.dispatch("xiandu_children/getMainData", {
      id: this.id,
      num: this.size,
      page: this.num
    });
  },
  mounted() {
    let url =
      "/xiandu/data/id/" +
      this.id +
      "/count/" +
      this.size +
      "/page/" +
      this.num;
    axios.get(url).then(({ data }) => {
      if (!data.results[this.index].content) {
        this.$refs.content.display = "none";
        this.$refs.content.innerHTML = data.results[this.index].raw;
        let p_list = this.$refs.content.getElementsByTagName("p");
        let html = "";
        for (const key in p_list) {
          if (p_list.hasOwnProperty(key)) {
            const element = p_list[key];
            html += element.outerHTML;
          }
        }
        html = JS_uncode(html);
        this.$refs.content.innerHTML = html;
        this.$refs.content.display = "block";
      }
    });
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  }
};

function JS_uncode(asciicode) {
  asciicode = asciicode.split("\\u");
  var nativeValue = asciicode[0];
  for (var i = 1; i < asciicode.length; i++) {
    var code = asciicode[i];
    nativeValue += String.fromCharCode(parseInt("0x" + code.substring(0, 4)));
    if (code.length > 4) {
      nativeValue += code.substring(4, code.length);
    }
  }
  return nativeValue;
}
</script>
<style>
.xiandu_detail .content {
  font-size: 0.3rem;
  line-height: 0.6rem;
  text-indent: 2em;
  padding: 0.2rem 0;
  word-break: break-all;
}
.xiandu_detail .ivu-time {
  font-size: 0.3rem;
  line-height: 0.6rem;
  color: #b2b2b2;
}
</style>

<style lang="scss" scoped>
.xiandu_detail {
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 0.1rem 0;
    background: url(../images/bg.png);
    p {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      text-align: center;
      height: 100%;
      line-height: 0.9rem;
      font-size: 0.4rem;
      font-weight: 900;
      letter-spacing: 0.04rem;
    }
  }
  main {
    padding: 0 0.4rem;
    padding-top: 1rem;
    h1 {
      color: #333;
      font-size: 0.4rem;
    }
  }
}
</style>
